<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:43
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage back>
    <template #title-suffix>
      <NTag class="ml-12" type="warning">
        {{ saleOrder?.orderNum }}
      </NTag>
    </template>
    <n-card class="w-100%" :title="saleOrder?.orderNum" segmented>
      <template #header-extra>
        <div class="flex items-center">
          <NButton type="error" @click="openModal1">
            <i class="i-material-symbols:delete-outline mr-4 text-18" />
            跑腿询价
          </NButton>
          <NButton class="ml-12" type="primary" @click="cancelErrandOrder">
            <i class="i-line-md:confirm-circle mr-4 text-18" />
            取消跑腿
          </NButton>
          <NButton class="ml-12" type="primary">
            <i class="i-line-md:confirm-circle mr-4 text-18" />
            骑手位置
          </NButton>
          <NButton class="ml-12" type="primary">
            <i class="i-line-md:confirm-circle mr-4 text-18" />
            查询状态
          </NButton>
        </div>
      </template>
      <n-descriptions class="w-100%" label-placement="left" :column="3">
        <n-descriptions-item label="状态">
          {{ errandOrder.errandOrderStatusName }}
        </n-descriptions-item>
        <n-descriptions-item label="跑腿费">
          {{ errandOrder.deliveryFee }}元
        </n-descriptions-item>
        <n-descriptions-item label="距离">
          {{ errandOrder.errandDistance }}米
        </n-descriptions-item>
        <n-descriptions-item label="骑手姓名">
          {{ errandOrder.transporterName }}
        </n-descriptions-item>
        <n-descriptions-item label="骑手电话">
          {{ errandOrder.transporterPhone }}
        </n-descriptions-item>
      </n-descriptions>
      <n-divider class="mb-0! mt-12!">
        <p class="text-14 opacity-60">
          跑腿单日志
        </p>
      </n-divider>
      <n-data-table :columns="errandDadaCallbacksColumns" :data="errandDadaCallbacks" bordered="true" />
    </n-card>
  </CommonPage>
</template>

<script setup>
import { NButton } from 'naive-ui'
import api from './api'

defineOptions({ name: 'SaleOrderDetails' })
const route = useRoute()
const saleOrder = ref({}) // 订单详情
const errandDadaCallbacks = ref([])// 订单日志
const errandOrder = ref({})// 跑腿单订单详情
// 生命周期
onMounted(async () => {
  // 订单日志
  errandOrder.value = await api.getErrandOrder(route.query.errandId)
  saleOrder.value = errandOrder.value.saleOrder
  errandDadaCallbacks.value = errandOrder.value.errandDadaCallbacks
})
// 订单项详情 表头
const errandDadaCallbacksColumns = [
  {
    title: '时间',
    key: 'callbackTime',
    align: 'center',
    titleAlign: 'center',
  },
  {
    title: '状态',
    key: 'errandStatusName',
    align: 'center',
    titleAlign: 'center',
  },

  {
    title: '备注',
    key: 'remark',
    align: 'center',
    titleAlign: 'center',
  },
]
// 取消跑腿
async function cancelErrandOrder() {
  errandOrder.value.cancelCode = '10000'
  errandOrder.value.cancelReason = '其他'
  await api.cancelErrandOrder(errandOrder.value)
  errandOrder.value.errandOrderStatus = 5
}
</script>

<style>
.sale-header {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(250 250 252 / var(--un-bg-opacity));
}
</style>
